<!doctype html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<div th:replace="home/module/_header"></div>

<main id="tt-pageContent">
    <div class="tt-custom-mobile-indent container">
        <div class="tt-categories-title">
            <div class="tt-title">分类列表</div>
            <div class="tt-search">
                <form class="search-wrapper" action="/category">
                    <div class="search-form">
                        <input type="text" name="keywords" class="tt-search__input" placeholder="搜索分类">
                        <button class="tt-search__btn" type="submit">
                            <svg class="tt-icon">
                                <use xlink:href="#icon-search"></use>
                            </svg>
                        </button>
                        <button class="tt-search__close">
                            <svg class="tt-icon">
                                <use xlink:href="#icon-cancel"></use>
                            </svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="tt-categories-list">
            <div class="row">
                <div class="col-md-6 col-lg-4" th:each="category : ${categories}">
                    <div class="tt-item">
                        <div class="tt-item-header">
                            <ul class="tt-list-badge">
                                <li><a th:href="'/category/'+${category.id}"><span th:class="'tt-color0'+${category?.cateSort%9+1}+' tt-badge'">[[${category.cateName}]]</span></a></li>
                            </ul>
                        </div>
                        <div class="tt-item-layout">
                            <div class="tt-innerwrapper">
                                [[${category.cateDesc}]]
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<div th:replace="home/module/_footer"></div>
